<template>
	<view class="content">
		<view class="container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<!-- 顶部切换标签 -->
			<view class="tab-container">
				<text :class="{'active-tab': currentTab === 0}" @click="changeTab(0)">当前报警</text>
				<text :class="{'active-tab': currentTab === 1}" @click="changeTab(1)">历史报警</text>
			</view>
			<!-- 搜索框 -->
			<view class="search-container">
				<input type="text" class="search-input" v-model="searchText" placeholder="请输入设备名称" />
				<button class="search-button" @click="searchAlerts()">搜索</button>
			</view>
			<!-- 报警记录列表 -->
			<scroll-view class="alert-list" v-if="currentTab===0">
				<view class="alert-list" v-for="alert in noDealTableData" :key="alert.id">
					<view class="alert-item">
						<!-- 上部内容：左侧图标和右侧设备信息 -->
						<view class="alert-top">
							<!-- 左侧图标 -->
							<view class="alert-left">
								<view class="iconfont alert-icon" v-if="alert.isDeal===0">&#xe68e;</view>
								<view class="iconfont deal-alert-icon" v-if="alert.isDeal===1">&#xe68e;</view>
							</view>

							<!-- 右侧设备信息 -->
							<view class="alert-right">
								<!-- 第一行：设备名称和设备号 -->
								<view class="alert-info">
									<text class="device-name">{{ alert.equipmentName }}</text>
									<text class="device-id">{{ alert.equipmentId }}</text>
								</view>
								<!-- 第二行：报警描述 -->
								<text class="alert-desc" v-if="alert.isDeal===0">{{ alert.warnAddr }}发生报警，请及时处理</text>
								<text class="alert-desc" v-if="alert.isDeal===1">{{ alert.warnAddr }}发生报警，已处理</text>
								<!-- 第三行：报警时间 -->
								<text class="alert-time">{{ alert.warnTime }}</text>
							</view>
						</view>

						<!-- 分割线 -->
						<view class="divider"></view>

						<!-- 底部内容：操作按钮 -->
						<view class="alert-actions">
							<button class="action-button" v-if="alert.teleNotification === '0' && alert.faultReport === '0' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">通知</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '0' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">上报</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">勘查</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '1' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">排除</button>
							<button class="action-button" v-if="alert.isMisinformation === '0'" @click="submitAlert(alert)">真实</button>
							<button class="action-button" v-if="alert.isMisinformation === '1'" @click="submitAlert(alert)">误报</button>
							<button class="action-button" @click="detialClick(alert)">详情</button>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 报警记录列表 -->
			<scroll-view class="alert-list" v-if="currentTab===1">
				<view class="alert-list" v-for="alert in tableData" :key="alert.id">
					<view class="alert-item">
						<!-- 上部内容：左侧图标和右侧设备信息 -->
						<view class="alert-top">
							<!-- 左侧图标 -->
							<view class="alert-left">
								<view class="iconfont alert-icon" v-if="alert.isDeal===0">&#xe68e;</view>
								<view class="iconfont deal-alert-icon" v-if="alert.isDeal===1">&#xe68e;</view>
							</view>

							<!-- 右侧设备信息 -->
							<view class="alert-right">
								<!-- 第一行：设备名称和设备号 -->
								<view class="alert-info">
									<text class="device-name">{{ alert.equipmentName }}</text>
									<text class="device-id">{{ alert.equipmentId }}</text>
								</view>
								<!-- 第二行：报警描述 -->
								<text class="alert-desc" v-if="alert.isDeal===0">{{ alert.warnAddr }}发生报警，请及时处理</text>
								<text class="alert-desc" v-if="alert.isDeal===1">{{ alert.warnAddr }}发生报警，已处理</text>
								<!-- 第三行：报警时间 -->
								<text class="alert-time">{{ alert.warnTime }}</text>
							</view>
						</view>

						<!-- 分割线 -->
						<view class="divider"></view>

						<!-- 底部内容：操作按钮 -->
						<view class="alert-actions">
							<button class="action-button" v-if="alert.teleNotification === '0' && alert.faultReport === '0' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">通知</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '0' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">上报</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">勘查</button>
							<button class="action-button" v-if="alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '1' && alert.eliminHidDang === '0'"
									type="primary" size="small" icon="Edit" @click="updateState(alert)">排除</button>
							<button class="action-button" v-if="alert.isMisinformation === '0'" @click="submitAlert(alert)">真实</button>
							<button class="action-button" v-if="alert.isMisinformation === '1'" @click="submitAlert(alert)">误报</button>
							<button class="action-button" @click="detialClick(alert)">详情</button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request';
	export default {
		data() {
			return {
				currentTab: 0,
				clientId: '',
				pageNum: 1,
				pageSize: 10,
				total: '',
				tableData: [],
				noDealTotal: '',
				noDealTableData: [],
				searchText: '', // 搜索关键词
			};
		},
		onLoad(options) {
			this.clientId = options.id
		},
		mounted() {
			this.load()
			this.noDealLoad()
		},
		methods: {
			changeTab(index) {
			  this.currentTab = index;
				this.searchText=""
				this.searchAlerts()
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			touchMove(event) {
				const moveX = event.touches[0].clientX;
				const distance = this.startX - moveX;

				// 处理滑动逻辑
				if (distance > 100) {
					this.changeTab(1); // 向左滑动切换到历史报警
				} else if (distance < -100) {
					this.changeTab(0); // 向右滑动切换到当前报警
				}
			},
			searchAlerts(){
				if(this.currentTab===0){
					this.noDealLoad()
				}else if(this.currentTab===1){
					this.load()
				}
			},
			load() {
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = 1;
				let clientIds = this.clientId;
				request.get("/warn-record/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize +"&keyWord="+ this.searchText + "&organizationId=" + organizationId +
						"&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
					if (res.code === '200') {
						for (let key in res.data) {
							if (key === "record") {
								this.tableData = res.data[key];
							} else if (key === "total") {
								this.total = res.data[key];
							}
						}
					}
				})
			},
			noDealLoad() {
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = 1;
				let clientIds = this.clientId;
				request.get("/warn-record/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize +"&keyWord="+ this.searchText + "&isDeal="+ 0 + "&organizationId=" + organizationId +
						"&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
					if (res.code === '200') {
						for (let key in res.data) {
							if (key === "record") {
								this.noDealTableData = res.data[key];
							} else if (key === "total") {
								this.noDealTotal = res.data[key];
							}
						}
					}
				})
			},
			// 处理逻辑
			updateState(alert) {
				if(alert.teleNotification === '1' && alert.faultReport === '0' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0'){
					uni.navigateTo({
						url:"/pages/warn/faultHandler"+"?data="+JSON.stringify(alert)
					})
				} else if (alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '0' && alert.eliminHidDang === '0') {
					uni.navigateTo({
						url:"/pages/warn/fieldHandler"+"?data="+JSON.stringify(alert)
					})
				} else if (alert.teleNotification === '1' && alert.faultReport === '1' && alert.fieldSurvey === '1' && alert.eliminHidDang === '0') {
					uni.navigateTo({
						url:"/pages/warn/eliminHandler"+"?data="+JSON.stringify(alert)
					})
				}
			},
			submitAlert(alert) {
				uni.navigateTo({
					url:"/pages/warn/misinHandler"+"?data="+JSON.stringify(alert)
				})
			},
			// 详情逻辑
			detialClick(item) {
				uni.navigateTo({
					url: "/pages/warn/detial"+"?data="+JSON.stringify(item)
				})
			},
		}
	};
</script>

<style scoped>
	.container {
		padding: 0rpx 20rpx;
	}

	:deep(.is-active) {
		color: var(--blue-color);
	}

	:deep(.wd-tabs__line) {
		width: 20%;
		background: var(--blue-color);
	}

	.content {
		background-color: var(--bg-color);
	}

	.tab-container {
		display: flex;
		justify-content: space-around;
		background-color: #f8f8f8;
		padding: 10px 0;
	}

	.active-tab {
		color: #007aff;
		font-weight: bold;
	}

	.alert-list {
		margin-top: 20rpx;
	}

	.alert-item {
		background-color: #fff;
		padding: 20rpx;
		margin: 10rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	/* 上部：左右结构 */
	.alert-top {
		display: flex;
		align-items: center;
	}

	.alert-left {
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.alert-icon {
		color: #ff0000;
		font-size: 40px;
	}

	.deal-alert-icon {
		color: #007aff;
		font-size: 40px;
	}

	.alert-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	/* 第一行：设备名称和设备号 */
	.alert-info {
		display: flex;
		justify-content: space-between;
	}

	.device-name {
		font-size: 20px;
		color: #333;
		font-weight: bold;
	}

	.device-id {
		font-size: 15px;
		color: #555;
	}

	/* 第二行：报警描述 */
	.alert-desc {
		color: #989898;
		font-size: 14px;
		margin: 5rpx 0;
	}

	/* 第三行：报警时间 */
	.alert-time {
		font-size: 18px;
		margin-top: 4rpx;
	}

	/* 分割线样式 */
	.divider {
		height: 1px;
		background-color: #e0e0e0;
		margin: 10px 30px;
	}

	/* 底部操作按钮样式 */
	.alert-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}

	:deep(uni-button) {
		line-height: 1.9
	}

	.action-button {
		background-color: var(--blue-color);
		color: #fff;
		border-radius: 5rpx;
		font-size: 16px;
	}

	.search-container {
		margin-top: 10px;
		height: 40px;
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 10rpx;
	}

	.search-input {
		flex: 1;
		height: 40px;
		font-size: 16px;
		padding: 0 10px;
		border: 1px solid #ddd;
		border-radius: 5rpx;
	}

	.search-button {
		margin-left: 10rpx;
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
		background-color: var(--blue-color);
		border-radius: 5rpx;
	}
</style>
